import React from 'react'
import { NavLink, Link, useRoutes, useNavigate } from 'react-router-dom'
import routes from './routes'
import './App.css'
export default function App() {
  const navigate = useNavigate()
  return (
    <div>
      <h3>App 组件</h3>
      <h4>普通标签链接</h4>
      <ul>
        <li>
          <a href="/home">首页</a>
        </li>
        <li>
          <a href="/about">关于</a>
        </li>
      </ul>
      <h4>NavLink 无刷新跳转</h4>
      <ul>
        <li>
          <NavLink
            to="/home"
            className={(obj) => {
              return obj.isActive ? 'test' : ''
            }}
          >
            首页
          </NavLink>
        </li>
        <li>
          <NavLink to="/about">关于</NavLink>
        </li>
      </ul>
      <h4>Link 无刷新跳转</h4>
      <ul>
        <li>
          <Link to="/home">首页</Link>
        </li>
        <li>
          <Link to="/about">关于</Link>
        </li>
      </ul>
      <button
        onClick={() => {
          navigate('/home')
        }}
      >
        home
      </button>
      {/*使用useRoutes hook 配置 */}
      {useRoutes(routes)}
    </div>
  )
}
